<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <title>Test: Log</title>
  <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  <link href="../example/lib/demo.css" rel="stylesheet"/>

  <!-- <script src="../dist/vconsole.min.js"></script> -->
  <!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script> -->
</head>
<body ontouchstart>
  <div id="page" class="page">
    <a onclick="formattedLog()" href="javascript:;" class="weui_btn weui_btn_default">formattedLog</a>
    <a onclick="styledLog()" href="javascript:;" class="weui_btn weui_btn_default">styledLog</a>
    <a onclick="normalObject()" href="javascript:;" class="weui_btn weui_btn_default">normalObject</a>
    <a onclick="circularObject()" href="javascript:;" class="weui_btn weui_btn_default">circularObject</a>
    <a onclick="circularArray()" href="javascript:;" class="weui_btn weui_btn_default">circularArray</a>
    <a onclick="largeObject()" href="javascript:;" class="weui_btn weui_btn_default">largeObject</a>
    <a onclick="smallArray()" href="javascript:;" class="weui_btn weui_btn_default">smallArray</a>
    <a onclick="repeatLog()" href="javascript:;" class="weui_btn weui_btn_default">repeatLog</a>
    <a onclick="windowError()" href="javascript:;" class="weui_btn weui_btn_default">window.error</a>
    <a onclick="promiseReject()" href="javascript:;" class="weui_btn weui_btn_default">promiseReject</a>
    <a onclick="xssLog()" href="javascript:;" class="weui_btn weui_btn_default">XSS: Log</a>
    <a onclick="xssStorage()" href="javascript:;" class="weui_btn weui_btn_default">XSS: Storage</a>
    <a onclick="changeTheme('dark')" href="javascript:;" class="weui_btn weui_btn_default">Theme:dark</a>
    <a onclick="changeTheme('light')" href="javascript:;" class="weui_btn weui_btn_default">Theme:light</a>
    <a onclick="changeTheme('')" href="javascript:;" class="weui_btn weui_btn_default">Theme:auto</a>
  </div>
</body>
</html>

<script type="module">
import '../dist/vconsole.min.js';

window.vConsole = new window.VConsole({
  maxLogNumber: 1000,
  // disableLogScrolling: true,
  // theme: 'dark',
  onReady: function() {
    console.log('vConsole is ready.');
  },
  onClearLog: function() {
    console.log('on clearLog');
  }
});
</script>

<script>
// setInterval(() => {
//   console.log(Math.random());
//   console.log('[system]', Math.random());
// }, 300);

function formattedLog() {
  console.info('formattedLog() Start');
  console.log('[default]', 'This log should be shown in Log tab.');
  console.log('[default]', 'Switch to System tab to see next log.');
  console.log('[system]', 'This log should be shown in System tab.');
  console.log('[foobar]', 'This log should be shown in Log tab.');
  console.info('formattedLog() End');
}

function styledLog() {
  console.info('styledLog() Start');
  console.log('%c red %c blue %c log.', 'color:red', 'color:blue', 'font-weight:bold', 'Use %c format.');
  console.info('styledLog() End');
}

function normalObject() {
  console.info('normalObject() Start');
  console.log('A normal JSON:', {
    number: 233,
    string: 'Hello world',
    boolean: true,
    obj: {foo: 'bar'},
    array: [8, 7, 6],
    func: function(a) { alert('b'); }
  });
  console.info('normalObject() End');
}

function circularArray() {
  console.info('circularArray() Start');
  var arr = [];
  arr[0] = 'foo';
  arr[1] = arr;
  console.log('A circular structure array:', arr);
  console.info('circularArray() End');
}

function circularObject() {
  console.info('circularArray() Start');
  var obj = {
    foo: 'bar'
  };
  obj.self = obj;
  obj.next = {};
  obj.next.next = obj.next;
  obj.next.self = obj;
  console.log('A circular structure JSON:', obj);
  console.info('circularObject() End');
}

function largeObject() {
  console.info('largeObject() Start');
  var obj = {},
      max = 500;
  for (var i=1; i<=max; i++) {
    obj[ 'key_' + i ] = Math.random();
  }
  console.log(max + ' keys:', obj);
  console.info('largeObject() End');
}

function smallArray() {
  console.info('smallArray() Start');
  var arr = [0,1,2,3,4,5,6,7,8,9,10,11];
  console.log(arr);
  console.info('smallArray() End');
}

function repeatLog() {
  console.log('repeatLog() Start');
  var a = {a: {b: 1}};
  var count = 0;
  var timer = setInterval(() => {
    count ++;
    console.log('repeat', 'foo bar', function(){});
    if (count >= 10) {
      clearInterval(timer);

      console.log('repeat', a);
      console.log('repeat', a);
      console.log('repeatLog() End');
    }
  }, 50);
}

function windowError() {
  console.info('windowError() Start');
  console.log(Error);
  a.b = 1;
  console.info('windowError() End');
}

function promiseReject() {
  console.info('promiseReject() Start');
  Promise.reject('reject string');
  Promise.reject(new Error('reject an Error'));
  Promise.reject({message: 'reject an object'});
  Promise.reject(666).then((result) => {
    console.log('resolved', result);
  }, (result) => {
    console.log('rejected', result);
  });
  setTimeout(() => {
    console.info('promiseReject() End');
  }, 0)
}

function xssLog() {
  console.info('xssLog() Start');
  const arr = [
    "-->\tyo\n'\"/><iframe>",
    ["-->\tyo\n'\"/><iframe>"]
  ];
  const obj = {
    'key': 'foo\nbar\tyoo',
    "-->\tyo\n'\"/><iframe>": "-->\n'\"/><iframe>"
  };
  console.log('XSS str:', "-->\tyo\n'\"/><iframe>");
  console.log(arr);
  console.log(obj);
  console.info('xssLog() End');
}

function xssStorage() {
  console.info('xssStorage() Start');
  localStorage.setItem("-->\tyo\n'\"/><iframe>", "-->\tyo\n'\"/><iframe>");
  sessionStorage.setItem("-->\tyo\n'\"/><iframe>", "-->\tyo\n'\"/><iframe>");
  document.cookie = "foo=-->\tyo";
  console.info('xssStorage() End');
}

function changeTheme(theme) {
  console.info('changeTheme() Start');
  window.vConsole.setOption('theme', theme);
  console.log('Current Theme:', theme || 'auto');
  console.info('changeTheme() End');
}
</script>